<!--
 * @Author: Bennent_G
 * @Date: 2024-12-26 09:50:04
 * @LastEditTime: 2025-03-25 16:22:13
 * @Description: auth drawer
-->

<template>
	<div>
		<el-drawer v-model="localOpen" class="custom-drawer-class" title="角色权限" direction="rtl" size="600">
			<template #footer>
				<el-button style="margin-right: 8px" @click="onClose">取消</el-button>
				<el-button type="primary" @click="onSubmit">授权</el-button>
			</template>
			<el-tree style="max-width: 600px" :data="data" show-checkbox node-key="id" default-expand-all
				:expand-on-click-node="false" :props="{ class: customNodeClass }" />
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, defineComponent, watch } from 'vue';
import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
import useNotificationHook from '@/hooks/common/useNotificationHook';

defineComponent({ name: 'RoleDrawer' });
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	id: {
		type: [Number, String],
		default: 0,
	},
});
const emits = defineEmits(['update:modelValue']);
const localOpen = computed({
	get: () => props.modelValue,
	set: (val) => {
		emits('update:modelValue', val);
	},
});

// tree
interface Tree {
	id: number
	label: string
	isPenultimate?: boolean
	children?: Tree[]
}
const customNodeClass = ({ isPenultimate }: TreeNodeData, node: Node) =>
	isPenultimate ? 'is-penultimate' : '';
const data: Tree[] = [
	{
		id: 1,
		label: 'Level one 1',
		children: [
			{
				id: 4,
				label: 'Level two 1-1',
				isPenultimate: true,
				children: [
					{
						id: 9,
						label: 'Level three 1-1-1',
					},
					{
						id: 10,
						label: 'Level three 1-1-2',
					},
				],
			},
		],
	},
];
const checkedKeys = ref<string[]>([]);
const getMenuByRole = () => {
	checkedKeys.value = ['0', '41'];
	console.log('getMenuByRole', props.id);
};
watch(
	() => props.id,
	(newValue, oldValue) => {
		if (newValue && newValue !== oldValue) {
			getMenuByRole();
		}
	}
);
watch(checkedKeys, () => {
	console.log('checkedKeys', checkedKeys.value);
});

const onClose = () => {
	localOpen.value = false;
};
const { openNotifation } = useNotificationHook();
const onSubmit = () => {
	// #TODO: 提交数据
	console.log('submit');
	openNotifation({ type: 'success', message: '授权成功' });
	onClose();
};
</script>

<style scoped lang="scss">
:deep(.el-drawer__body) {
	.is-penultimate>.el-tree-node__content {
		color: #626aef !important;
	}

	.is-penultimate>.el-tree-node__children>div {
		display: inline-block;
		margin-right: 4px;

		&:not(:first-child) .el-tree-node__content {
			padding-left: 0px !important;
		}

		.el-tree-node__content {
			padding-right: 16px;
		}
	}
}
</style>
